import React, { useEffect } from 'react'
import style from './Search.module.css'
import { Header, Footer, FilterArea, ProductList } from '../../components'
import { useParams, useLocation } from 'react-router-dom'
import { Spin } from 'antd'
import { searchProduct } from '../../redux/productSearch/slice'
import { useSelector } from '../../redux/hooks'
import { useDispatch } from 'react-redux'
import { MainLayout } from '../../layouts/mainLayout'

interface MathParams {
  keywords: string
}

export const Search: React.FC = () => {
  const { keywords } = useParams()

  const loading = useSelector(state => state.productSearch.loading)
  const error = useSelector(state => state.productSearch.error)
  const pagination = useSelector(state => state.productSearch.pagination)
  const productList = useSelector(state => state.productSearch.data)

  // 获取dispatch函数
  const dispatch = useDispatch()
  const location = useLocation()
  useEffect(() => {
    dispatch(searchProduct({nextPage: 1, pageSize: 10, keywords}))
  }, [location])

  // 分页处理
  const onPageChange = (nextPage, pageSize) => {
    dispatch(searchProduct({nextPage, pageSize, keywords}))
  }
  if (loading) {
    return <Spin
      size="large"
      style={{
        marginTop: 200,
        marginBottom: 200,
        marginLeft: "auto",
        marginRight: "auto",
        width: "100%"
      }}
    ></Spin>
  }
  return (
    <div>
      {/* <Header></Header>
      <div className={style['page-content']}> */}
      <MainLayout>
        {/* 分类过滤 */}
        <div className={style['product-list-container']}>
          <FilterArea></FilterArea>
        </div>
        {/* 产品列表 */}
        <div className={style['product-list-container']}>
          <ProductList
            data={productList}
            paging={pagination}
            onPageChange={onPageChange}
          ></ProductList>
        </div>
      {/* </div>
      <Footer></Footer> */}
      </MainLayout>
    </div>
  )
}
